import { Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Participant } from "@/lib/types"

interface ParticipantsListProps {
  participants: Participant[]
  removeParticipant: (id: string) => void
}

export function ParticipantsList({ participants, removeParticipant }: ParticipantsListProps) {
  if (participants.length === 0) {
    return <div className="text-center py-4 text-gray-500">暂无参与者</div>
  }

  return (
    <div className="space-y-2">
      {participants.map((participant) => (
        <div
          key={participant.id}
          className="flex items-center justify-between p-2 bg-gray-50 rounded-md border"
          draggable
          onDragStart={(e) => {
            e.dataTransfer.setData("application/json", JSON.stringify(participant))
          }}
        >
          <div>
            <div className="font-medium">{participant.name}</div>
            <div className="text-xs text-gray-500">{participant.type}</div>
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => removeParticipant(participant.id)}
          >
            <Trash2 className="h-4 w-4" />
          </Button>
        </div>
      ))}
    </div>
  )
}